<template>
  <div class="product-list">
    <el-card class="box-card product-list-card" shadow="never">
      <div slot="header" class="clearfix">
        <CardHeader> </CardHeader>
      </div>
      <cardinput-vue :text="'请输入搜索信息'"></cardinput-vue>
    </el-card>
    <!-- 数据 -->
    <el-card class="box-card product-list-card" shadow="never">
      <div slot="header" class="clearfix">
        <CardDate @add="add"></CardDate>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="编号" align="center">
        </el-table-column>
        <el-table-column prop="specs_id" label="规格ID" align="center"></el-table-column>
        <el-table-column prop="product_type" label="规格类型" align="center">
        </el-table-column>
        <el-table-column label="商品图片" align="center" width="150">
          <template slot-scope="scope">
            <el-image v-if="tableData[scope.$index]" style="width: 100px; height: 100px"
              :src="tableData[scope.$index].product_specs_img1" fit="fit" />
          </template>
        </el-table-column>
        <el-table-column prop="product_img" label="规格图片" align="center">
          <template slot-scope="scope">
            <el-image v-if="tableData[scope.$index]" style="width: 100px; height: 100px"
              :src="tableData[scope.$index].product_size_img" fit="fit" />
          </template>
        </el-table-column>
        <el-table-column prop="specs_name" label="规格单位" align="center">
        </el-table-column>
        <el-table-column label="商品规格" align="center" width="140">
          <template slot-scope="scope">
            <p>规格1：{{ tableData[scope.$index].product_specs1 }}</p>
            <p v-if="tableData[scope.$index].product_specs2">
              规格2：{{ tableData[scope.$index].product_specs2 }}</p>
            <p v-if="tableData[scope.$index].product_specs3">
              规格3：{{ tableData[scope.$index].product_specs3 }}</p>
            <p v-if="tableData[scope.$index].product_specs4">
              规格4：{{ tableData[scope.$index].product_specs4 }}</p>
            <p v-if="tableData[scope.$index].product_specs5">
              规格5：{{ tableData[scope.$index].product_specs5 }}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="编辑商品品牌信息" class="chang-product" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      <el-form class="info_form" inline :rules="alterRules" :model="alterForm" ref='changeFrom'>
        <el-form-item label="商品规格编号：" prop="specs_id" style="width: 100%; ">
          <el-select size="small" v-model="alterForm.specs_id" filterable placeholder="请选择商品编号">
            <el-option v-for="(item, index) in product" :key="index" :value="item.specs_id">{{
              `${item.product_name}:${item.product_no}` }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品类别" prop="product_type" style="width: 45%; ">
          <el-select size="small" v-model="alterForm.product_type" filterable placeholder="请选择商品类别">
            <el-option v-for="(item, index) in getType" :key="index" :value="item.type_name">{{ item.type_name }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格单位" prop="specs_name" style="width: 45%; ">
          <el-select size="small" v-model="alterForm.specs_name" filterable placeholder="请选择商品规格单位">
            <el-option value="g">g</el-option>
            <el-option value="厘米">厘米</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格1" prop="product_specs1" style="width: 45%">
          <el-input size="small" v-model="alterForm.product_specs1" placeholder="规格1"></el-input>
        </el-form-item>
        <el-form-item label="规格2" prop="product_specs2" style="width: 45%" v-show="alterForm.product_type !== '咖啡下午茶'">
          <el-input size="small" v-model="alterForm.product_specs2" placeholder="规格2"></el-input>
        </el-form-item>
        <el-form-item label="规格3" prop="product_specs3" style="width: 45%" v-show="alterForm.product_type !== '咖啡下午茶'">
          <el-input size="small" v-model="alterForm.product_specs3" placeholder="规格3"></el-input>
        </el-form-item>
        <el-form-item label="规格4" prop="product_specs4" style="width: 45%" v-show="alterForm.product_type !== '咖啡下午茶'">
          <el-input size="small" v-model="alterForm.product_specs4" placeholder="规格4"></el-input>
        </el-form-item>
        <el-form-item label="规格5" prop="product_specs5" style="width: 100%; " v-show="alterForm.product_type !== '咖啡下午茶'">
          <el-input size="small" v-model="alterForm.product_specs5" placeholder="规格5"></el-input>
        </el-form-item>
        <el-form-item label="规格图片1:" prop="product_specs_img1" style="width: 45%; ">
          <el-upload class="product-upload" action="http://127.0.0.1:3000/api/upload" :on-success="uploadSuccess1"
            :auto-upload="false" ref="productUpload1">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="规格图片2:" prop="product_specs_img2" style="width: 45%; ">
          <el-upload class="product-upload" action="http://127.0.0.1:3000/api/upload" :on-success="uploadSuccess2"
            :auto-upload="false" ref="productUpload2">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="规格图片3:" prop="product_specs_img3" style="width: 45%; ">
          <el-upload class="product-upload" action="http://127.0.0.1:3000/api/upload" :on-success="uploadSuccess3"
            :auto-upload="false" ref="productUpload3">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="规格尺寸图片：" prop="product_size_img" style="width: 100%; ">
          <el-upload class="product-upload" action="http://127.0.0.1:3000/api/upload" :on-success="uploadSuccessSize"
            :auto-upload="false" ref="upload1">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog_footer">
        <el-button type="primary" style="padding: 12px 54px;margin: 0 55px;" @click="submitChange('changeFrom')">确
          定</el-button>
        <el-button style="padding: 12px 54px;margin: 0 55px;" @click="cancelChange('changeFrom')">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getSpecs, deletsSpecs, getproduct, getType, addSpecs } from '@/api';
import CardinputVue from '@/components/commodity/Cardinput.vue';
import CardHeader from '@/components/commodity/CardHeader.vue';
import CardDate from '@/components/commodity/CardDate.vue'
export default {
  name: 'KodaiProductType',

  data () {
    return {
      tableData: [],
      product: [], //商品信息,
      getType: [],
      insert: false,   //插入时的标志
      dialogFormVisible: false,
      alterForm: {
        specs_id: '',
        specs_name: '',
        product_type: '',
        product_size_img: '',
        product_specs1: '',
        product_specs2: '',
        product_specs3: '',
        product_specs4: '',
        product_specs5: '',
        product_specs_img1: '',
        product_specs_img2: '',
        product_specs_img3: ''
      },
      alterRules: {
        product_type: [{ required: true, message: '请选择商品类型', trigger: 'blur' }],
        specs_name: [{ required: true, message: '请输入规格类型', trigger: 'blur' },
        { min: 1, max: 30, message: '规格类型长度不允许超过 30 个字符', trigger: 'blur' }]
      }
    };
  },

  mounted () {
    getSpecs().then(res => {
      this.tableData = res.data.data

    }),
      getproduct().then(res => {
        this.product = res.data.data
      }),
      getType().then(res => {
        this.getType = res.data.data
      })
  },

  methods: {
    add () {
      this.dialogFormVisible = true;
      this.insert = true
    },
    handleEdit (index, row) {
      this.dialogFormVisible = true
      console.log(index, row);
    },
    // 获取图片
    uploadSuccessSize (res, file) {
      if (res.code === 200) {
        this.showMessage.call(this, 'success', "商品图片3上传成功！");
        this.alterForm.product_size_img = res.url;
      } else {
        this.showMessage.call(this, 'error', "商品图片3上传失败！");
      }
    },
    // 上传图片函数1
    uploadSuccess1 (res, file) {
      if (res.code === 200) {
        this.showMessage.call(this, 'success', "商品图片1上传成功！");
        this.alterForm.product_specs_img1 = res.url;
      } else {
        this.showMessage.call(this, 'error', "商品图片1上传失败！");
      }
    }, // 上传图片函数2
    uploadSuccess2 (res, file) {
      if (res.code === 200) {
        this.showMessage.call(this, 'success', "商品图片2上传成功！");
        this.alterForm.product_specs_img2 = res.url;
      } else {
        this.showMessage.call(this, 'error', "商品图片2上传失败！");
      }
    }, // 上传图片函数3
    uploadSuccess3 (res, file) {
      if (res.code === 200) {
        this.showMessage.call(this, 'success', "商品图片3上传成功！");
        this.alterForm.product_specs_img3 = res.url;
      } else {
        this.showMessage.call(this, 'error', "商品图片3上传失败！");
      }
    },
    // 删除函数
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该品牌信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row);
        let loading = this.$loading({ lock: true, text: "数据提交中", background: "rgba(255,255,255,0.1)" });
        deletsSpecs(row).then(res => {
          loading.close();
          if (res.data.code === 200) {
            // rows.splice(index, 1);//删掉该行
            this.$router.go(0)
            this.$notify({ title: '成功', message: '规格(' + row.specs_id + ')\t移除成功', type: 'success' });
          } else {
            this.$notify({ title: '错误', message: res.data.msg, type: 'error' });
          }
        }).catch((err) => {
          loading.close();
          this.$message.error(err);
        })
      })
    },
    submitChange (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.insert) {
            this.$refs.productUpload1.submit();
            this.$refs.productUpload2.submit();
            this.$refs.productUpload3.submit();
            this.$refs.upload1.submit();
            let loading = this.$loading({ lock: true, text: "数据提交中", background: "rgba(255,255,255,0.5)" });
            setTimeout(() => {
              console.log(this.alterForm);
              addSpecs(this.alterForm).then(res => {
                if (res.data.code === 200) {
                  loading.close();
                  this.dialogFormVisible = false;
                  this.$router.go(0)
                  this.$notify({ title: '成功\t商品规格添加成功', type: 'success' });
                }
              }).catch(() => {
                loading.close();
                this.$message.error('提交失败')
              });
            }, 1000)
          } else {
            // this.$http.post('/productBrand/existsBrandName?brandId=' + this.productBrand[this.handleIndex].brandId + '&brandName=' + this.alterForm.brandName).then((rep) => {
            //   if (rep.data.code === 200) {
            //     if (rep.data.data) {
            //       this.$alert('品牌(' + this.alterForm.brandName + ')\t已存在，无法完成修改操作', '警告', {
            //         confirmButtonText: '确定',
            //         type: "warning"
            //       });
            //     } else {
            //       let loading = this.$loading({ lock: true, text: "数据提交中", background: "rgba(255,255,255,0.1)" });
            //       this.$http.post('/productBrand/update', this.$qs.stringify(this.alterForm)).then((rep) => {
            //         loading.close();
            //         if (rep.data.code === 200) {
            //           this.dialogFormVisible = false;
            //           this.productBrand[this.handleIndex] = this.alterForm;
            // this.$notify({ title: '成功', message: '品牌信息更新成功', type: 'success' });
            //         } else {
            //           this.$notify({ title: '错误', message: rep.data.message, type: 'error' });
            //         }
            //       }).catch((err) => {
            //         loading.close();
            //         this.$msg.error(err)
            //       })
            //     }
            //   }
            // }).catch((err) => { this.$msg.error(err) })
          }
        } else {
          return false;
        }
      });
    },
    cancelChange (formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
      this.$notify({ title: '操作取消', message: '', type: 'success' });
    }
  },
  components: {
    CardHeader,
    CardDate,
    CardinputVue
  }
};
</script>

<style scoped>
.info_form .el-form-item {
  display: flex;
}

.dialog_footer {
  display: flex;
  justify-content: center;
}
</style>